<template>
  <div class="scan-page">
    <div class="page-header">
      <div class="container">
        <h1 class="page-title">扫码点餐</h1>
        <p class="page-subtitle">扫描餐桌二维码开始点餐</p>
      </div>
    </div>

    <div class="container">
      <div class="scan-content">
        <div class="scan-card">
          <div class="scan-area" v-if="!scannedTable">
            <div class="scan-icon">
              <el-icon size="80" color="#667eea">
                <QrCode />
              </el-icon>
            </div>
            <h3>请扫描餐桌二维码</h3>
            <p>将二维码放入框内，即可自动识别</p>
            
            <div class="scan-buttons">
              <el-button type="primary" size="large" @click="startScan">
                <el-icon><Camera /></el-icon>
                开始扫码
              </el-button>
              <el-button size="large" @click="showDemoQR">
                <el-icon><View /></el-icon>
                查看示例
              </el-button>
            </div>
          </div>

          <div class="scan-result" v-else>
            <div class="success-icon">
              <el-icon size="80" color="#67c23a">
                <CircleCheckFilled />
              </el-icon>
            </div>
            <h3>扫码成功！</h3>
            <p>您正在 <strong>{{ scannedTable }}</strong> 号桌</p>
            
            <div class="action-buttons">
              <el-button type="primary" size="large" @click="goToMenu">
                <el-icon><Menu /></el-icon>
                开始点餐
              </el-button>
              <el-button size="large" @click="resetScan">
                <el-icon><Refresh /></el-icon>
                重新扫码
              </el-button>
            </div>
          </div>
        </div>

        <div class="info-cards">
          <div class="info-card">
            <el-icon size="40" color="#667eea">
              <Star />
            </el-icon>
            <h4>便捷点餐</h4>
            <p>扫码即可浏览菜单，无需等待服务员</p>
          </div>
          
          <div class="info-card">
            <el-icon size="40" color="#67c23a">
              <Clock />
            </el-icon>
            <h4>快速下单</h4>
            <p>在线点餐，厨房立即接单制作</p>
          </div>
          
          <div class="info-card">
            <el-icon size="40" color="#e6a23c">
              <Wallet />
            </el-icon>
            <h4>透明价格</h4>
            <p>明码标价，消费明细一目了然</p>
          </div>
        </div>
      </div>
    </div>

    <!-- 扫码器组件 -->
    <el-dialog v-model="showScanner" title="扫码器" width="90%" :close-on-click-modal="false">
      <div class="scanner-container">
        <div id="reader"></div>
      </div>
      <template #footer>
        <el-button @click="closeScanner">关闭</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { useCartStore } from '../stores/cart'
import { ElMessage } from 'element-plus'

const router = useRouter()
const cartStore = useCartStore()

const scannedTable = ref('')
const showScanner = ref(false)

const startScan = () => {
  showScanner.value = true
  // 模拟扫码过程
  setTimeout(() => {
    simulateScan()
  }, 1000)
}

const simulateScan = () => {
  const tableId = Math.floor(Math.random() * 20) + 1
  scannedTable.value = tableId
  cartStore.setTableId(tableId)
  showScanner.value = false
  ElMessage.success(`成功识别 ${tableId} 号桌`)
}

const showDemoQR = () => {
  ElMessage.info('这是演示模式，将自动分配餐桌')
  setTimeout(() => {
    simulateScan()
  }, 500)
}

const goToMenu = () => {
  router.push(`/menu/${scannedTable.value}`)
}

const resetScan = () => {
  scannedTable.value = ''
  cartStore.setTableId(null)
}

const closeScanner = () => {
  showScanner.value = false
}
</script>

<style scoped>
.scan-page {
  min-height: 100vh;
  background: #f8f9fa;
}

.scan-content {
  padding: 40px 0;
}

.scan-card {
  background: white;
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
  padding: 60px 40px;
  text-align: center;
  margin-bottom: 40px;
}

.scan-area, .scan-result {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

.scan-icon, .success-icon {
  margin-bottom: 20px;
}

.scan-area h3, .scan-result h3 {
  font-size: 24px;
  color: #333;
  margin: 0;
}

.scan-area p, .scan-result p {
  color: #666;
  font-size: 16px;
  margin: 0;
}

.scan-buttons, .action-buttons {
  display: flex;
  gap: 16px;
  margin-top: 20px;
}

.info-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
}

.info-card {
  background: white;
  border-radius: 12px;
  padding: 32px 24px;
  text-align: center;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
  transition: transform 0.3s ease;
}

.info-card:hover {
  transform: translateY(-4px);
}

.info-card h4 {
  margin: 16px 0 12px;
  color: #333;
  font-size: 18px;
}

.info-card p {
  color: #666;
  line-height: 1.6;
  margin: 0;
}

.scanner-container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 300px;
}

#reader {
  width: 100%;
  max-width: 400px;
}

@media (max-width: 768px) {
  .scan-card {
    padding: 40px 20px;
  }
  
  .scan-buttons, .action-buttons {
    flex-direction: column;
    width: 100%;
  }
  
  .info-cards {
    grid-template-columns: 1fr;
  }
}
</style> 